<template>
  <div class="wp-box">
    <!-- 标定 -->
    <div class="check-1">
      <!-- <el-checkbox v-model="checked">车道线检测</el-checkbox> -->
      <p class="check-tit">车道线检测</p>
      <p class="check-p">视频选择</p>
      <el-checkbox-group v-model="checkedCities" @change="video" :max="1">
        <el-checkbox
          class="portraitBox"
          v-for="city in cities"
          :label="city"
          :key="city"
          >{{ city }}</el-checkbox
        >
      </el-checkbox-group>
    </div>
  </div>
</template>
  
  <script>
import { defineComponent } from "vue";
export default defineComponent({
  name: "",
  components: {},
  data() {
    return {
      checked: false,
      checkedTwo: false,
      checkedCities: ["高速公路"],
      cities: ["高速公路"],
      LaneDetectConfig: { Id: 0 },
    };
  },
  created(){
    this.LaneDetectConfig = JSON.parse(sessionStorage.getItem("LaneDetectList")) || {Id: 0 };
    if (this.LaneDetectConfig.Id == 0 ) {
      this.checkedCities = ['高速公路']
    }
    // if (this.LaneDetectConfig.Id == 1 ) {
    //   this.checkedCities = ['视频2']
    // }
    // if (this.LaneDetectConfig.Id == 2 ) {
    //   this.checkedCities = ['视频3']
    // }
  },
  methods: {
    video(data) {
      if (data[0] == "高速公路") {
        this.LaneDetectConfig.Id = 0;
      } 
      // else if (data[0] == "视频2") {
      //   this.LaneDetectConfig.Id = 1;
      // } else if (data[0] == "视频3") {
      //   this.LaneDetectConfig.Id = 2;
      // } else if (data[0] == undefined) {
      //   this.LaneDetectConfig.Id = -1;
      // }
    },
    // 数据回传
    Sub() {
      this.$emit("ok", this.LaneDetectConfig);
    },
  },
});
</script>
  
<style lang="less" scoped>
/deep/.el-checkbox__label {
  font-size: 18px;
}
/deep/.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #1b1b1d;
}
.check-1 {
  margin-left: 20px;
  margin-top: 30px;
}
.check-p {
  color: #1b1b1d;
  padding-left: 26px;
  margin-bottom: 8px;
  font-size: 18px;
}
.check-tit {
  color: #1b1b1d;
  margin-bottom: 8px;
  font-size: 18px;
}
.portraitBox {
  height: 32px;
  padding-left: 26px;
  padding-right: 80px;
}
</style>